<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天哟</title>
	
	<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="socket.io.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<style>
body {
    padding: 20px;
}
#console {
    height: 450px;
    overflow: auto;
}
.username-msg {
    color: orange;
}
.connect-msg {
    color: green;
}
.disconnect-msg {
    color: red;
}
.online-msg {
    color: #800080;
}
.login-msg {
    color: #888;
}
.ban-msg {
    color: blue;
}
.send-msg {
    color: black
}
</style>
</head>

<body>

<h1>桃子陪您摆龙门阵</h1>
    <!-- <br /> -->
    <div id="console" class="well"></div>
    <form class="well form-inline" onsubmit="return false;">
        classroomId:<input id="classroomId"  type="text" value="2" />
        userId:<input id="userId"  class="input-xlarge" type="text" value="4"/>
        name:<input id="name"  class="input-xlarge" type="text" value="西瓜2"/>
        <!-- <input id="msg" class="input-xlarge" type="text" placeholder="发送内容. . . " /> -->
        <textarea id="msg" rows="10" cols="50" placeholder="发送内容. . . "></textarea>
        <button type="button" onClick="sendLogin()" class="btn">登陆</button>
        <button type="button" onClick="sendMessage()" class="btn">发送</button>
        <button type="button" onClick="sendDisconnect()" class="btn">下线</button>
        <button type="button" onClick="reloadThis()" class="btn">重连并登陆</button>
        <button type="button" onClick="sendBan(1)" class="btn">禁言</button>
        <button type="button" onClick="sendBan(0)" class="btn">取消禁言</button>
        <button type="button" onClick="sendGetChatUser()" class="btn">获取在线人员</button>
		
    </form>

</body>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'msg' );
editor.on("instanceReady",function(){
});

var socket;
connect();

function connect(){

	//前端在连接时需要加上{transports:['websocket']}，解决跨域
    socket = io.connect('ws://127.0.0.1:8888?userId='+$("#userId").val()+'&classroomId='+$("#classroomId").val(),{transports:['websocket']});
				
    socket.on('connect',function() {
        serverOutput('<span class="connect-msg">欢迎进入水果家族聊天室!</span>');
        serverOutput('<span class="connect-msg">===========================================</span>');
    });
	
	//聊天消息监听
    socket.on("room"+$("#classroomId").val(), function(data) {
		
        serverOutput('<span class="send-msg">'+data.userName+' id聊天内容为：'+data.msgContent+' </span>');
        serverOutput('<span class="connect-msg">===========================================</span>');
    });

	//登录成功监听
    socket.on("login"+$("#classroomId").val(), function(data) {
        serverOutput('<span class="login-msg">'+data.msgContent+' 欧耶加入</span>');
        serverOutput('<span class="connect-msg">===========================================</span>');
    });
	
	//禁言状态监听
    socket.on("ban"+$("#classroomId").val(), function(data) {
        serverOutput('<span class="ban-msg">'+data.msgContent+' 禁言操作</span>');
        serverOutput('<span class="connect-msg">===========================================</span>');
    });
	
	//在线列表监听
    socket.on('onlineUser'+$("#classroomId").val(),function(data) {
		serverOutput('<span class="online-msg">在线人数:'+data.length+'</span>');
		for(var i in data){
			//serverOutput('<span class="online-msg">'+data[i].userName+'在线</span>');
			serverOutput('<ul class="online-msg">'+data[i].userName+'在线</ul>');
		}
        serverOutput('<span class="connect-msg">===========================================</span>');
    });
	
	
    socket.on('disconnect'+$("#classroomId").val(),function() {
        serverOutput('<span class="disconnect-msg">'+$("#name").val()+'已下线!disconnect </span>');
        serverOutput('<span class="connect-msg">===========================================</span>');

    });
	

}

function reloadThis(){
    sendDisconnect;
    connect();
	sendLogin();
    console.log(socket);
}

function sendDisconnect() {
    socket.emit('groupChat', {
        classroomId:$("#classroomId").val(),
        userId:$("#userId").val(),
        userName : $("#name").val(),
        msgContent : $("#name").val() + "已下线!sendDisconnect"
    });
    socket.disconnect();
}

function sendMessage() {
    var userName = $("#name").val()
    var message = editor.getData();
    $('#msg').val('');
    socket.emit('groupChat', {
        classroomId:$("#classroomId").val(),
        userId:$("#userId").val(),
        userName : userName,
        msgContent : message
    }, (data) => {
		if(data != undefined && data != "" && data != null){
			console.log(data);
		}
	});
}

function sendLogin() {
    socket.emit('login', {
        classroomId:$("#classroomId").val(),
        userId:$("#userId").val(),
        userName : $("#name").val(),
        msgContent : "登陆!sendLogin"
    }, (data) => {
		if(data != undefined && data != "" && data != null){
			console.log(data);
		}
	});
    //socket.login();
}

function sendBan(isBan) {
    socket.emit('ban', {
        classroomId:$("#classroomId").val(),
        userId:$("#userId").val(),
        userName : $("#name").val(),
        isBanChat : isBan,
        msgContent : "禁言操作!sendBan "+isBan
    }, (data) => {
		if(data != undefined && data != "" && data != null){
			console.log(data);
		}
	});
}

function sendGetChatUser() {
    socket.emit('chatUser', {
        classroomId:$("#classroomId").val(),
        msgContent : "获取课堂在线人员 sendGetChatUser"
    }, (data) => {
		if(data != undefined && data != "" && data != null){
			console.log(data);
		}
	});
}

function serverOutput(message){
    var element = $("<div>" + message + "</div>");
    $('#console').prepend(element);
}

document.onkeydown=function(event){
    //alert(0);
    var e = event || window.event || arguments.callee.caller.arguments[0];

    if(event.ctrlKey&&event.keyCode==13){ // enter 键
        //要做的事情
        sendMessage();
    }
}; 
</script>

</html>